<template>
  <div id="NewsInformation">
    <div class="container">
      <div class="goback" @click="goback">返回服务列表</div>
      <div class="container text-center">
        <h3>服务详情</h3>
        <p style="color: #b2b2b2">Pet Store</p>
      </div>

      <div class="post-container">
        <h3 class="title">{{ postData.title }}</h3>
        <!-- <div class="flex-box">
          <div class="avatar-box">
            <img :src="avatar" alt="" />
          </div>
          <div class="text-box">
            <div class="name">
              {{ postData.user ? postData.user.username : "管理员" }}
            </div>
            <div class="createdDate">
              {{ dayjs(postData.createdDate).format("YYYY-MM-DD HH:MM") }}
            </div>
          </div>
        </div> -->
        <h4 class="price">价格：￥{{ postData.price }}</h4>
        <div class="img-box" style="margin-top: 20px">
          <img :src="getImg(postData.cover)" alt="" />
        </div>
        <div class="content">{{ postData.content }}</div>
        <div class="buy" @click="buy">预约</div>
      </div>
      <!-- <div class="comment-container">
        <div class="title">评论区</div>
        <div
          v-for="(item, index) in commentList"
          :key="index"
          class="comment-item"
        >
          <div class="flex-box">
            <div class="avatar-box">
              <img :src="avatar" alt="" />
            </div>
            <div class="text-box">
              <div class="name">
                {{ item.user ? item.user.username : "管理员" }}
              </div>
              <div class="createdDate">
                {{ dayjs(item.createdDate).format("YYYY-MM-DD HH:MM") }}
              </div>
            </div>
          </div>
          <div class="content">{{ item.content }}</div>
        </div>
        <div class="form">
          <textarea
            placeholder="请输入评论内容"
            rows="4"
            v-model="commentValue"
          />
          <div class="addButton" @click="add">评论</div>
        </div>
      </div> -->
    </div>
    <a-modal
      :maskClosable="false"
      title="确认订单"
      :width="700"
      :visible="visible"
      @ok="handleOk"
      @cancel="close"
      cancelText="关闭"
      destroyOnClose
    >
      <a-row class="modal-row">
        <a-col :span="10"> 订单号：</a-col>
        <a-col :span="10"> {{ postData.orderNumber }}</a-col>
      </a-row>
      <a-row class="modal-row">
        <a-col :span="10"> 服务名称：</a-col>
        <a-col :span="10"> {{ postData.title }}</a-col>
      </a-row>
      <a-row class="modal-row">
        <a-col :span="10"> 服务价格：</a-col>
        <a-col :span="10"> ￥{{ postData.price }}</a-col>
      </a-row>
      <a-row class="modal-row">
        <a-col :span="10"> 下单者：</a-col>
        <a-col :span="10"> {{ postData.buyUser }}</a-col>
      </a-row>
      <!-- <a-row class="modal-row">
        <a-col :span="10"> 卖家：</a-col>
        <a-col :span="10">
          {{ postData.user ? postData.user.username : "管理员" }}</a-col
        >
      </a-row> -->
    </a-modal>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import { getAction, postAction } from "../util/basic";
import dayjs from "dayjs";
import Girl from "../assets/img/头像女.png";
import Boy from "../assets/img/头像男.png";
import { uuid } from "../util/util";
export default {
  name: "ForumDetail",
  data() {
    return {
      nav: "ForumDetail",
      postData: {},
      commentList: [],
      commentValue: "",
      url: {
        detail: "/service/detail",
        commentList: "/comment/shop/list",
        commentAdd: "/comment/add"
      },
      serviceId: "",
      visible: false,
      model: {}
    };
  },
  created() {
    this.serviceId = this.$route.params.id;
  },
  mounted() {
    var wow = new WOW();
    wow.init();
    this.initPost();
    this.initComment();
  },
  computed: {
    avatar: function() {
      if (Math.floor(Math.random() * 1) == 0) {
        return Girl;
      } else {
        return Boy;
      }
    }
  },
  methods: {
    dayjs,
    initPost() {
      getAction(this.url.detail, { serviceId: this.serviceId }).then(res => {
        if (res.success) {
          this.postData = res.result;
        }
      });
    },
    initComment() {
      getAction(this.url.commentList, { serviceId: this.serviceId }).then(res => {
        if (res.success) {
          this.commentList = res.result;
        }
      });
    },
    add() {
      if (sessionStorage.getItem("username")) {
        postAction(this.url.commentAdd, {
          serviceId: this.serviceId,
          content: this.commentValue,
          userId: sessionStorage.getItem("userId")
        }).then(res => {
          if (res.success) {
            this.initComment();
            this.commentValue = "";
          }
        });
      } else {
        this.$router.push({
          name: `login`
        });
      }
    },
    getImg(cover) {
      let url = "";
      if (cover) {
        url = JSON.parse(cover)[0].absolute_path;
      }
      return url;
    },
    switchNav(type) {
      this.nav = type;
    },
    goback() {
      this.$router.push({
        name: `serviceList`
      });
    },
    buy() {
      const username = sessionStorage.getItem("username");
      if (username) {
        this.postData.orderNumber = uuid();
        this.postData.buyUser = username;
        this.visible = true;
      } else {
        this.$router.push({
          name: `login`
        });
      }
    },
    handleOk() {
      this.$message.success('去支付！')
    },
    close() {
      this.model = {};
      this.visible = false;
    }
  }
};
</script>
<style scoped>
.modal-row{
  margin: 10px 0px;
}
.buy {
  padding: 12px;
  color: #fff;
  background: #f65;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  font-size: 28px;
  text-align: center;
}
.nav {
  margin: 20px 0;
}
.nav > a {
  display: inline-block;
  text-decoration: none;
  width: 120px;
  height: 45px;
  line-height: 45px;
  color: #333;
  border: 1px solid #333;
}
.nav > a.active {
  color: #1e73be;
  border-color: #1e73be;
}
.nav > a:hover {
  color: #1e73be;
  border-color: #1e73be;
}
.post-container > .title {
  text-align: center;
}
.text-box {
  margin-left: 20px;
}
.flex-box {
  display: flex;
  align-items: center;
}
.content {
  font-size: 24px;
  font-weight: normal;
}
.avatar-box {
  width: 60px;
  height: 60px;
}
.avatar-box img {
  width: 100%;
  height: 100%;
}
.container {
  position: relative;
  padding-bottom:50px;
}
.goback {
  position: absolute;
  right: 20px;
  top: 40px;
  padding: 10px;
  color: #fff;
  background: #f65;
  border-radius: 10px;
  cursor: pointer;
  z-index: 2;
}
.comment-container {
  margin-top: 30px;
  margin-bottom: 30px;
}
.comment-container .title {
  font-weight: bold;
  font-size: 26px;
}
.comment-container .comment-item {
  background: #f7f6f6;
  border-radius: 20px;
  box-shadow: 0 0rpx 10rpx 0 rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 100);
  position: relative;
  padding: 20px;
  margin: 10px;
}
.comment-container .avatar-box {
  width: 40px;
  height: 40px;
}
.comment-container .content {
  margin-left: 60px;
  margin-top: 10px;
  font-size: 20px;
}
.form {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  padding: 50px 0px;
}
.form textarea {
  text-overflow: ellipsis;
  width: 90%;
  height: auto;
  min-height: 32px;
  line-height: 1.5;
  vertical-align: bottom;
  transition: all 0.3s, height 0s;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
.form .addButton {
  position: absolute;
  right: 5%;
  bottom: 0px;
  padding: 10px;
  color: #fff;
  background: #f65;
  border-radius: 10px;
  cursor: pointer;
  z-index: 2;
}
.price {
  color: #f65;
}
</style>
